<script setup>
import { ref } from "vue";
import slFilter from "../../components/index/sl-filter/sl-filter.vue";
import { httpRequest } from "../../utils/http";
import { onUnload } from "@dcloudio/uni-app";
const isUse = ref(-1);
const aiVoice = ref([]);
const pinyin = ref("");

//获取AI数据 aiVoice
const getAi = async () => {
  const res = await httpRequest("/api/getAiVoice", "POST");
  console.log(res);
  aiVoice.value = res.data;
};
// onHide(()=>{
//     uni.setStorageSync('ai',pinyin.value)
//     console.log(pinyin.value);
// })
getAi();
const list = ref(["影视", "情感", "游戏", "动漫", "电台"]);
const themeColor = "#000000";
const result = (e) => {
  console.log(e);
};

//点击使用
const getUse = (e) => {
  console.log(e);
  isCheck.value = 0;
  isUse.value = e[0].namePin;
  let name = e[0].name;
  pinyin.value = {
    pinyin: isUse.value,
    name: name,
  };
  uni.setStorageSync("ai", pinyin.value);
};

//选中
const isCheck = ref(0);
const getCheck = (i, e) => {
  isCheck.value = i;
  pinyin.value = {
    pinyin: e.namePin,
    name: e.name,
  };
  uni.setStorageSync("ai", pinyin.value);
};

//播放▶音频示例
const audio = uni.createInnerAudioContext();
const play = (url) => {
  console.log(url);
  if (audio.paused == false) {
    audio.pause();
  } else {
    audio.src = url;
    audio.play();
  }
};
audio.onStop((e) => {
  console.log("播放停止");
  console.log(e);
});
audio.onEnded((e) => {
  console.log("播放结束");
  console.log(e);
});
audio.onError((e) => {
  console.log("播放错误");
  console.log(e);
});

//销毁事件暂停播放⏸
onUnload(() => {
  audio.stop();
});
</script>

<template>
  <view class="page">
    <!-- <sl-filter :themeColor="themeColor" :menuList="menuList" @result="result" /> -->
    <view class="item" v-for="(item, index) in aiVoice" :key="index">
      <view class="top">
        <view style="display: flex; align-items: center">
          <view class="avatar">{{ item[0].name.charAt(item[0].name.length - 1) }}</view>
          <view class="info">
            <view style="display: flex; align-items: center">
              <text class="name">{{ item[0].name }}</text>
              <text class="style">（{{ item.length }}种风格）</text>
            </view>
            <text class="description">{{ describe }}</text>
          </view>
        </view>
        <view
          class="use"
          :class="isUse == item[0].namePin ? 'active' : ''"
          @click="getUse(item)"
          >{{ isUse == item[0].namePin ? "正在使用" : "使用" }}</view
        >
      </view>
      <view class="middle">
        <view class="triangle"></view>
        <view class="sort">{{ item[0].area }}</view>
      </view>
      <view class="bottom">
        <view
          class="scroll"
          @click="getCheck(i, e)"
          :class="isCheck == i && isUse == item[0].namePin ? 'checked' : ''"
          v-for="(e, i) in item"
          :key="i"
        >
          <view class="content" @click="play(e.url)">
            <image class="img" src="" mode="" />
            <text>{{ e.emotion }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  box-sizing: border-box;
  padding: 30rpx;
  .item {
    box-sizing: border-box;
    width: 690rpx;
    height: 460rpx;
    background-color: #fff;
    padding: 30rpx;
    border-radius: 24rpx;
    margin-bottom: 24rpx;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .avatar {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
        background-color: rgb(142, 84, 244);
        text-align: center;
        line-height: 96rpx;
        font-size: 30rpx;
        color: #fff;
        font-weight: 700;
        margin-right: 24rpx;
      }
      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .name {
          font-size: 32rpx;
          font-weight: 500;
          color: rgb(48, 49, 51);
          margin-right: 5rpx;
        }
        .style {
          font-size: 24rpx;
          color: rgb(144, 147, 153);
        }
        .description {
          font-size: 24rpx;
          color: rgb(69, 70, 74);
          margin-top: 6rpx;
        }
      }
      .use {
        width: 132rpx;
        height: 64rpx;
        background-color: #fff;
        color: rgb(142, 84, 244);
        font-size: 30rpx;
        text-align: center;
        line-height: 64rpx;
        border: 1px solid rgb(142, 84, 244);
        border-radius: 8rpx;
      }
    }
    .middle {
      position: relative;
      box-sizing: border-box;
      display: flex;
      margin-top: 26rpx;
      width: 630rpx;
      height: 60rpx;
      background-color: rgb(249, 249, 249);
      border-radius: 12rpx;
      padding: 12rpx;
      margin-bottom: 30rpx;
      .triangle {
        position: absolute;
        top: -20rpx;
        left: 30rpx;
        width: 0;
        height: 0;
        border-left: 18rpx solid transparent;
        border-right: 18rpx solid transparent;
        border-bottom: 20rpx solid rgb(249, 249, 249);
      }
      .sort {
        width: 72rpx;
        height: 36rpx;
        font-size: 24rpx;
        color: rgb(144, 147, 153);
        border-right: 2rpx solid rgb(220, 223, 230);
        text-align: center;
        line-height: 36rpx;
        &:nth-last-child(1) {
          border-right: none;
        }
      }
    }
    .bottom {
      display: flex;
      box-sizing: border-box;
      width: 100%;
      height: 188rpx;
      overflow-x: scroll;

      .scroll {
        box-sizing: border-box;
        width: 116rpx;
        height: 188rpx;
        padding: 24rpx 18rpx;
        margin-right: 6rpx;
        border-radius: 16rpx;
        border: 1px solid rgba($color: #000000, $alpha: 0);
        .content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          width: 80rpx;
          height: 140rpx;
          .img {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
          }
        }
      }
    }
  }
}
.active {
  border: none !important;
}
.checked {
  border: 1px solid rgb(142, 84, 244) !important;
}
</style>
